"use client";
import React from "react";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { forwardRef, useImperativeHandle } from "react";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { RegisterSchema } from "@/schemas";
export interface RegisterFormRef {
  onSubmit: () => void;
}

interface FormProps {
  handleSubmit: (values: z.infer<typeof RegisterSchema>) => void;
}

const RegisterForm = forwardRef<RegisterFormRef, FormProps>(
  ({ handleSubmit }, ref) => {
    const form = useForm<z.infer<typeof RegisterSchema>>({
      resolver: zodResolver(RegisterSchema),
      defaultValues: {
        name: "",
        password: "",
        email: "",
      },
    });

    useImperativeHandle(ref, () => ({
      onSubmit: async () => {
        try {
          const isValid = await form.trigger();
          if (isValid) {
            const values = form.getValues();
            handleSubmit(values);
          } else {
            console.log("Validation failed");
          }
        } catch (error) {
          console.error("Error during form submission:", error);
        }
      },
    }));
    return (
      <Form {...form}>
        <form className="space-y-6">
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem className="flex flex-row items-center py-4 gap-4">
                <FormLabel htmlFor="id_name" className="w-20">
                  用户名
                </FormLabel>
                <FormControl>
                  <Input id="id_name" {...field} className="w-60" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem className="flex flex-row items-center py-4 gap-4">
                <FormLabel htmlFor="id_email" className="w-20">
                  邮箱
                </FormLabel>
                <FormControl>
                  <Input id="id_email" {...field} className="w-60" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem className="flex flex-row items-center py-4 gap-4">
                <FormLabel htmlFor="id_password" className="w-20">
                  密码
                </FormLabel>
                <FormControl>
                  <Input
                    type="password"
                    id="id_password"
                    {...field}
                    className="w-60"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
    );
  },
);

RegisterForm.displayName = "RegisterForm";
export { RegisterForm };
